<template>
  <div class="content">
    <div class="card-row">
      <template v-for="tool in toolList">
        <Card class="link-card" @click="tool.openPage">
          {{ tool.title }}
        </Card>
      </template>
    </div>


  </div>


</template>

<script setup>
import {ref} from 'vue'
import router from '@/router'

const toolList = ref([
  {
    title: '代码格式化',
    openPage: () => {
      router.push('chrome_format')
    }
  },
  {
    title: 'base64转换',
    openPage: () => {
      router.push('base64')
    }
  },
  {
    title: 'svga预览',
    openPage: () => {
      router.push('chrome_svga_scan')
    }
  },
  {
    title: '图片识别',
    openPage: () => {
      router.push('tesseract_ocr')
    }
  }
])

function openPage() {
  router.push('chrome_format')
}
</script>

<style scoped>
.content {
  width: 100%;
  height: 100%;

}
.card-row{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.link-card {
  width: 400px;
  height: 48px;
  margin: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
</style>
